<template>
	<view class="speak-comment-container">
		<uni-popup ref="popup" type="bottom" :isMaskClick="false">
			<view class="popup-header">
				<text @click="close" class="cancel-btn">取消</text>
				<text @click="_send_comment" class="send-btn">发布</text>
			</view>
			<view class="pop-content">
				<textarea v-model.trim="comment_val" placeholder="请输入评论" maxlength="100"
					@keyup.ctrl.enter="_send_comment" />
				<text class="text-count">{{comment_val.length}}/100</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "SpeakComment",
		props: {
			show_popup: Boolean,
			article_id: String,
			reply_data: Object
		},
		data() {
			return {
				comment_val: ''
			};
		},
		methods: {
			close() { // 清空输入框，关闭 popup
				this.$refs.popup.close()
				this.comment_val = ''
				this.$emit('close')
			},
			async _send_comment() {
				if (this.comment_val) {
					const msg = await this.$http.send_comment({
						user_id: this.$store.state.user_info._id,
						article_id: this.article_id,
						content: this.comment_val,
						comment_id: this.reply_data.comment_id,
						is_reply: this.reply_data.is_reply,
						reply_id: this.reply_data.reply_id
					})
					uni.showToast({
						title: msg
					})
					this.$emit('send_over') // 通知父组件，评论发送完了
					this.close()
				} else {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
				}
			}
		},
		watch: {
			show_popup(val) {
				if (val) {
					this.$refs.popup.open()
				}
			}
		}
	}
</script>

<style lang="scss">
	.speak-comment-container {
		.popup-header {
			@include flex();
			border-bottom: 1px solid #777;
			padding: 20rpx;
			color: #555;

			text {
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				color: #fff;
				font-size: 30rpx;

				&.cancel-btn {
					background-color: $secondary;
				}

				&.send-btn {
					background-color: $primary;
				}
			}
		}

		.pop-content {
			margin-top: 10rpx;
			position: relative;

			uni-textarea {
				width: 100%;
				padding: 10rpx 20rpx;
			}

			.text-count {
				position: absolute;
				right: 15rpx;
				bottom: 15rpx;
				color: #999;
				font-size: 28rpx;
			}
		}
	}

	/deep/ .uni-popup__wrapper {
		background-color: #fff !important;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>
